﻿<%@ page title="Accordion Widget" language="C#" masterpagefile="~/standard.master" codefile="accordion.aspx.cs" inherits="Sample.JQuery.AccordionPage" %>
<asp:content id="Content" contentplaceholderid="ContentPlaceHolder" runat="server">
	<div><asp:hyperlink runat="server" id="CodeLink" navigateurl="~/code.aspx?file=accordion&title=Accordion+Widget+Code" text="View Source Code" /></div>
	<div>The server time is <%=DateTime.Now.ToLongTimeString()%></div>
	<hr />

	<h2>Standard Client-Only Active Changes</h2>
	<jquery:accordion runat="server" id="StandardAccordion" collapsible="true">
		<icons header="ui-icon-plus" headerselected="ui-icon-minus" />
		<panels>
		
			<jquery:accordionpanel runat="server" id="WelcomePanel" active="true">
				<header>Welcome</header>
				<content>
					<p>
						This is the njQuery ASPX implementation of the
						<jquery:themedicon runat="server" icon="ui-icon-newwin" tooltip="Opens in New Window" />
						<a href="http://jqueryui.com/demos/accordion/" target="_blank">jQuery UI Accordion Widget</a>.
					</p>
					<p>
						The panels that follow demonstrate how the implementation into the ASPX world has been
						made seamless when using various post-back techniques.
					</p>
				</content>
			</jquery:accordionpanel>
			
			<jquery:accordionpanel runat="server" id="HiddenPanel" visible="false">
				<header>Hidden</header>
			</jquery:accordionpanel>
			
			<jquery:accordionpanel runat="server" id="AjaxPanel">
				<header>Update Panel Post-back</header>
				<content>
					<asp:updatepanel runat="server" id="PostBackUpdatePanel" updatemode="Conditional" childrenastriggers="true">
						<contenttemplate>
							The server time is <%=DateTime.Now.ToLongTimeString()%>
							<asp:button runat="server" id="AjaxPostBackButton" text="Submit" />
							<p>
								The post-back on this panel is inside an UpdatePanel control.
								Notice how the timestamp on this panel updates, while the timestamp above does not.
							</p>
						</contenttemplate>
					</asp:updatepanel>
				</content>
			</jquery:accordionpanel>
			
			<jquery:accordionpanel runat="server" id="PostBackPanel" headertext="">
				<header>Traditional Post-back</header>
				<content>
					The server time is <%=DateTime.Now.ToLongTimeString()%>
					<asp:button runat="server" id="TraditionalPostBackButton" text="Submit" />
					<p>
						The post-back on this page a simple Button control with no UpdatePanel.
						Notice how the timestamps on this panel and the top of the page both update.
						Also see how the currently-selected panel remains after post-back.
					</p>
				</content>
			</jquery:accordionpanel>
			
		</panels>
	</jquery:accordion>

	<h2>Animation</h2>
	<jquery:accordionanimationdef runat="server" id="CustomAnimation">
		<definition>
			this.slide(options, {
				easing: 'easeInOutCirc',
				duration: 1250
			});
		</definition>
	</jquery:accordionanimationdef>
	<div>
		<asp:updatepanel runat="server" id="AnimationUpdatePanel" updatemode="Conditional" childrenastriggers="true">
			<contenttemplate>
				<label for="<%= AnimationDropdown.ClientID %>">Animation for Accordions below:</label>
				<asp:dropdownlist runat="server" id="AnimationDropdown" autopostback="true">
					<asp:listitem value="False" text="None" />
					<asp:listitem value="Slide" text="Slide" selected="True" />
					<asp:listitem value="BounceSlide" text="Bounce Slide" />
					<asp:listitem value="EaseSlide" text="Ease Slide" />
					<asp:listitem value="CustomAnimation" text="Custom" />
				</asp:dropdownlist>
			</contenttemplate>
		</asp:updatepanel>
	</div>

	<h2>Server-Side ChangeStart Event</h2>
	<asp:updatepanel runat="server" id="ChangeStartUpdatePanel" updatemode="Conditional" childrenastriggers="true">
		<triggers>
			<asp:asyncpostbacktrigger controlid="AnimationDropdown" eventname="SelectedIndexChanged" />
		</triggers>
		<contenttemplate>
			<div><asp:label runat="server" id="ChangeStartInfoLabel" text="The accordion is in its initial rendered state." /></div>
			<div><asp:checkbox runat="server" id="CancelChangeStartCheckBox" text="Cancel Change on Server" /></div>
			<jquery:accordion runat="server" id="ChangeStartAccordion" collapsible="true" postbackonchangestart="true">
				<icons header="ui-icon-plus" headerselected="ui-icon-minus" />
				<panels>
					<jquery:accordionpanel runat="server" id="ChangeStartPanel1">
						<header>First Panel</header>
						<content>This is the first panel.</content>
					</jquery:accordionpanel>
					<jquery:accordionpanel runat="server" id="ChangeStartPanel2">
						<header>Second Panel</header>
						<content>This is the second panel.</content>
					</jquery:accordionpanel>
					<jquery:accordionpanel runat="server" id="ChangeStartPanel3">
						<header>Third Panel</header>
						<content>This is the third panel.</content>
					</jquery:accordionpanel>
				</panels>
			</jquery:accordion>
			<div>
				<asp:button runat="server" id="SelectPanel1Button" text="Select First Panel (Server-Side)" />
				<asp:button runat="server" id="SelectPanel3Button" text="Select Third Panel (Server-Side)" />
			</div>
		</contenttemplate>
	</asp:updatepanel>
	
	<h2>Server Side Panel Activating Events</h2>
	<div>The panels on this control will lazy load the first time they are activated by the client.</div>
	<asp:updatepanel runat="server" id="PanelActivatingUpdatePanel" updatemode="Conditional" childrenastriggers="true">
		<triggers>
			<asp:asyncpostbacktrigger controlid="AnimationDropdown" eventname="SelectedIndexChanged" />
		</triggers>
		<contenttemplate>
			<jquery:accordion runat="server" id="PanelActivatingAccordion" collapsible="true">
				<icons header="ui-icon-plus" headerselected="ui-icon-minus" />
				<panels>
					<jquery:accordionpanel runat="server" id="PanelActivatingPanel1" postbackonchangestart="true">
						<header>First Panel</header>
						<content>This panel was loaded at <asp:label runat="server" id="PanelActivatingTimestampLabel1" />.</content>
					</jquery:accordionpanel>
					<jquery:accordionpanel runat="server" id="PanelActivatingPanel2" postbackonchangestart="true">
						<header>Second Panel</header>
						<content>This panel was loaded at <asp:label runat="server" id="PanelActivatingTimestampLabel2" />.</content>
					</jquery:accordionpanel>
					<jquery:accordionpanel runat="server" id="PanelActivatingPanel3" postbackonchangestart="true">
						<header>Third Panel</header>
						<content>This panel was loaded at <asp:label runat="server" id="PanelActivatingTimestampLabel3" />.</content>
					</jquery:accordionpanel>
				</panels>
			</jquery:accordion>
		</contenttemplate>
	</asp:updatepanel>

</asp:content>